<template>
    <el-table
      :data="studentInfos"
      stripe
      border
      style="width: 100%"
      class="student-table"
    >
      <el-table-column
        v-for="(label, key) in studentKeys"
        :key="key"
        :prop="key"
        :label="label"
      >
        <template #default="{ row }" v-if="key === 'score'">
          <span :style="{ color: row[key] >= 60 ? 'green' : 'red' }">
            {{ row[key] >= 60 ? '及格' : '挂科' }}
          </span>
        </template>
      </el-table-column>
  
      <el-table-column label="操作" width="250">
        <template #default="{ row }">
          <el-button v-permission="who" size="small" plain>查看</el-button>
          <el-button
            v-permission="who"
            size="small"
            type="primary"
            @click="handleEdit(row)"
          >
            修改
          </el-button>
          <el-popconfirm
            title="确定要删除这条记录吗？"
            @confirm="handleDelete(row.id)"
          >
            <template #reference>
              <el-button v-permission="who" size="small" type="danger">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  
    <el-dialog v-model="dialogVisible" title="编辑学生信息">
      <el-form :model="editForm">
        <el-form-item label="学号">
          <el-input v-model="editForm.id" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="宿舍">
          <el-input v-model="editForm.live" />
        </el-form-item>
        <el-form-item label="成绩">
          <el-input-number
            v-model="editForm.score"
            :min="0"
            :max="100"
            controls-position="right"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { reactive, ref } from 'vue'
  
  const studentKeys = reactive({
    id: '学号',
    name: '姓名',
    live: '宿舍',
    score: '成绩'
  })
  
  const studentInfos = reactive([
    { id: 2005001, name: '博丽灵梦', live: '一善书院', score: 75 },
    { id: 2005002, name: '战地风云', live: '双馨书院', score: 55 },
    { id: 2005003, name: '喵斯快跑', live: '三创书院', score: 90 },
    { id: 2005004, name: '罪恶装备', live: '四实书院', score: 45 },
    { id: 2005005, name: '守望先锋', live: '八方书院', score: 35 },
    { id: 2005006, name: '永里雾枝', live: '拾德书院', score: 66 }
  ])
  
  const who = ref('admin')
  const dialogVisible = ref(false)
  const editForm = ref({
    id: '',
    name: '',
    live: '',
    score: 0
  })
  
  const handleEdit = (row) => {
    editForm.value = { ...row }
    dialogVisible.value = true
  }
  
  const handleDelete = (id) => {
    const index = studentInfos.findIndex((item) => item.id === id)
    studentInfos.splice(index, 1)
  }
  
  const submitForm = () => {
    const index = studentInfos.findIndex(
      (item) => item.id === editForm.value.id
    )
    studentInfos[index] = editForm.value
    dialogVisible.value = false
  }
  </script>
